@property --ascii-titles {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--ascii-titles: on) {
    h3[data-text-variant='heading-xxl/extrabold'] {
        font-family: 'asciid';
        font-size: 50px;
        font-weight: 400;
    }
}

@property --ascii-loader {
    syntax: 'off | system24 | cats';
    inherits: false;
    initial-value: system24;
}

@container body style(--ascii-loader: system24) {
    .content_a2f514 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .content_a2f514 > .spinner_a2f514 {
        display: none;
    }
    .content_a2f514::before {
        display: block;
        content: '                    __                ___  __ __\A    _______  _______/ /____  ____ ___ |__ \\/ // /\A   / ___/ / / / ___/ __/ _ \\/ __ `__ \\__/ / // /_\A  (__  ) /_/ (__  ) /_/  __/ / / / / / __/__  __/\A/____/\\__, /____/\\__/\\___/_/ /_/ /_/____/ /_/   \A      /____/                                     ';
        font-size: 18px;
        font-family: monospace;
        white-space: pre;
        line-height: 1.2;
        background: linear-gradient(to right, var(--brand-360) 0%, var(--background-accent) 25%, var(--background-accent) 75%, var(--brand-360) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% auto;
        animation: textShine 1.5s linear infinite reverse;
    }
    .text_a2f514 {
        position: static;
    }

    @keyframes textShine {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        50.0001% {
            background-position: -100%, 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
}

@container body style(--ascii-loader: cats) {
    .content_a2f514 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        position: static;
    }
    .content_a2f514 > .spinner_a2f514 {
        display: none;
    }
    .content_a2f514::before {
        display: block;
        content: url('https://raw.githubusercontent.com/refact0r/system24/refs/heads/main/assets/cats.gif');
    }
    .text_a2f514 {
        position: static;
    }
}
